// 这是新增计划有咩那  ****************  **************** **************** ****************
import { IRouteComponentProps } from "umi"
import React, { useState, useContext, useEffect } from "react";
import { Progress, Table } from 'antd';
// 引入样式
import styles from "./myProject.less";
// 与mobx建立联系
import { observer } from "mobx-react-lite";
// 引入仓库
import storeContext from "@/context/storeContext";
import { ImyProject, IQuery1, Promjet, newThreeTable,IQuery2,IList3} from "@/utils/myProject";
import { newProgress, newTwoTable,collect} from "@/services/index";

const myProject: React.FC<IRouteComponentProps> = ({ history }) => {
    let { myProject } = useContext(storeContext);
    const [uulist1, setUulist1] = useState(["小组项目", "收藏项目"]);

    let [headerlist, setHeaderList] = useState(["未开始", "进行中", "已结束"])

    let [falg, setFalg] = useState(0);
    let [active1, setactive1] = useState(1);

    let [queryParams, setQueryParams] = useState<ImyProject>({ isAsc: "desc", orderByColumn: 'project.stucount', pageNum: 1, pageSize: 5, proType: '', specialtyTag: '', industryTag: '', proName: '' } as ImyProject);
    let [queryParmas1, setQueryParmas1] = useState<IQuery1>({ planType: 1, pageNum: 1, pageSize: 5 })
    let uu: string = '';

    let u2: string = ""

    let [uulist3, setUulist3] = useState<Promjet[]>([])
    let [uulist4, setUulist4] = useState<newThreeTable[]>([]);
    let [uulist5,setUulist5]=useState<IList3[]>([])
    useEffect(() => {
        myProject.newproject(queryParams)
    }, []);

    useEffect(() => {        
        if (active1) {
            queryParmas1 = { ...queryParmas1, planType: active1, pageNum: 1, pageSize: 5 }
        } else {
            queryParmas1 = { ...queryParmas1, planType: 0, pageNum: 1, pageSize: 5 }
        }
        console.log(queryParmas1);
        newProgress(queryParmas1).then((ok) => {
            setUulist3(ok.rows)
        })
        newTwoTable().then((ok) => {
           
            setUulist4(ok.data)
        });
        collect({pageNum: 1, pageSize: 12,isAsc: 'desc'}).then((ok)=>{
                 setUulist5(ok.rows);
        })
    }, [active1])

    //表格
    const dataSource = uulist4 && uulist4.map((item, index) => {
        return item.selectClassPlanByStuList.stuList.map((item1, index1) => {
            return {
                key: index1,
                name: item1.username,
                age: "",
                address: '',
            }
        })
    })[0]

    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '实例项目',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '时长',
            dataIndex: 'address',
            key: 'address',
        },
    ];


    // 弹框 
    return <div className={styles.myProject}>
        <div className={styles.myProject_cont}>
            <div className={styles.myProject_left}>
                <div className={styles.list1}>
                    {
                        uulist1.map((item, index) => {
                            return <h3 key={index} className={index == falg ? styles.active : ""} onClick={() => {
                                setFalg(index)
                            }
                            }>   {item}
                            </h3>
                        })
                    }
                </div>
                {
                    falg === 0 ? <div className={styles.left11}>
                        <div className={styles.letf12}>
                            <div className={styles.el_radio_group}>
                                {
                                    headerlist.map((item, index) => {
                                        return <span key={index} className={active1 === index ? styles.active1 : ""} onClick={() => {
                                            setactive1(index);
                                        }}>{item}</span>
                                    })
                                }
                            </div>
                            <div className={styles.righttt}>
                                <div>
                                    <span style={{ width: "13px", height: "13px", borderRadius: "50%", display: "inline-block", backgroundColor: "green" }}>

                                    </span>
                                    <span>
                                        完成
                                    </span>
                                </div>
                                <div>
                                    <span style={{ width: "13px", height: "13px", borderRadius: "50%", display: "inline-block", backgroundColor: "orange" }}>

                                    </span>
                                    <span>
                                        进行中
                                    </span>
                                </div>
                                <div>
                                    <span style={{ width: "13px", height: "13px", borderRadius: "50%", display: "inline-block", backgroundColor: "#ccc" }}>

                                    </span>
                                    <span>
                                        未完成
                                    </span>
                                </div>
                            </div>

                        </div>
                        <div className={styles.ootop}>
                            {
                                uulist3 && uulist3.map((item, index) => {
                                    return <div>
                                        <h4><span>{item.planName}</span><span>2021A班</span></h4>
                                        <p><span>项目{item.projectCount}个</span><span>|</span><span>时长49天</span></p>
                                        <p><span>{item.beginDate}</span><span>~</span><span>{item.endDate}</span></p>
                                        {/* <p><span>完成{item.planProgress}%</span></p> */}
                                        <div style={{ display: "flex" }}> <Progress percent={item.groupProgress} width={500} showInfo={false} />完成{item.groupProgress}%</div>
                                        <div style={{ width: '100%', margin: "10px auto", border: "1px solid #000" }}>
                                            {
                                                uulist4 && uulist4.map((item1, index1) => {
                                                    return <div key={index1} style={{ width: "100%", padding: "20px", backgroundColor: "rgba(178, 183, 198, 0.1)" }}>
                                                        <h3>{item1.projectName}</h3>
                                                        <p><span>项目任务0个</span><span>时长49天</span></p>
                                                        <p><span>{item1.beginDate}</span><span>~</span><span>{item1.endDate}</span></p>
                                                        <div>
                                                            <Progress percent={item1.selectClassPlanByStuList.groupProgress} strokeColor="orange" />
                                                        </div>
                                                        <div style={{ width: "100%", height: "40px", display: "flex" }}>
                                                            <div style={{ margin: "10px 10px" }}><img src="http://111.203.59.61:8060/static/img/person.358ba865.svg" alt="" /><span>人员{item1.selectClassPlanByStuList.members}人</span></div>
                                                            <div style={{ margin: "10px 10px" }}><img src="http://111.203.59.61:8060/static/img/complete.ac9f6b54.svg" alt="" /><span>按期完成0人</span></div>
                                                            <div style={{ margin: "10px 10px" }}><img src="http://111.203.59.61:8060/static/img/person.358ba865.svg" alt="" /><span>延期未完成{item1.selectClassPlanByStuList.members}</span></div>
                                                        </div>
                                                        {/* item1.selectClassPlanByStuList.stuList */}
                                                        <Table dataSource={dataSource} columns={columns} />;
                                                    </div>
                                                })
                                            }

                                        </div>
                                    </div>
                                })
                            }
                        </div>
                    </div>

                        : <div  style={{width:"100%",display:"flex",flexWrap:"wrap",justifyContent:"space-between"}}>
                            {uulist5&&uulist5.map((item,index)=>{
                                    return <div key={item.id}  style={{width:"28%",height:"250px"}}>
                                        <img src={`http://111.203.59.61:8060${item.pictureUrl}`} alt=""  style={{width:"100%",height:"60%"}}/>
                                        <h2>
                                            {item.name}
                                        </h2>
                                    </div>
                            })}
                        </div>
                }
                <div>

                </div>
            </div>
            <div className={styles.myProject_right}>
                <div className={styles.top}>
                    <span className={styles.ss}></span>
                    <div className={styles.box}>
                        相关实训
                    </div>
                </div>
                <div className={styles.right}>
                    {
                        myProject.ImyProjectLis && myProject.ImyProjectLis.map((item, index) => {
                            return <li key={index}>
                                <img src={`http://111.203.59.61:8060${item.pictureUrl}`} alt="" />
                                <div className={styles.pright}>
                                    <p>{item.name}</p>
                                    <li>
                                        <div>
                                            <img src={`${uu}`} alt="" />
                                            <span>   {item.stuCount}</span>
                                        </div>
                                        <div>
                                            <img src={`${u2}`} alt="" />
                                            <span>
                                                29
                                            </span>
                                        </div>
                                    </li>
                                </div>
                            </li>
                        })
                    }

                </div>
            </div>
        </div>

    </div>
}

export default observer(myProject)
// 新增计划页面结束  **************** ****************  **************** ****************